<template>
	<view class="page">
		<div class="top-panel">
			<div class="avatar-container">
				<cl-avatar
					size="200rpx"
					src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
				></cl-avatar>
			</div>
		</div>
		<div class="my-info-panel">
			<div class="-user-name">昵称名称</div>
			<div class="-to-auth">去认证<cl-icon name="arrow-right"></cl-icon></div>
		</div>
		<div class="my-menu-list">
			<div class="my-menu-item" v-for="(item, index) in menus" :key="index">
				<div class="-left">
					<image style="width: 50rpx; height: 50rpx" :src="item.icon"></image>
					<div class="-text">{{ item.text }}</div>
				</div>
				<div class="-right">
					<cl-icon name="arrow-right" size="40rpx"></cl-icon>
				</div>
			</div>
		</div>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const menus = ref([
	{
		icon: "/static/fasong.png",
		text: "基本信息",
	},
	{
		icon: "/static/fasong.png",
		text: "用户收藏",
	},
	{
		icon: "/static/fasong.png",
		text: "用户分享",
	},
	{
		icon: "/static/fasong.png",
		text: "意见反馈",
	},
	{
		icon: "/static/fasong.png",
		text: "招商合作",
	},
]);
</script>

<style lang="scss">
.top-panel {
	height: 280rpx;
	background-color: #005fc6;
	border-bottom-left-radius: 60rpx;
	border-bottom-right-radius: 60rpx;
	position: relative;
	.avatar-container {
		position: absolute;
		bottom: -100rpx;
		left: 60rpx;
		border: 10rpx solid #ffffff;
		border-radius: 50%;
		overflow: hidden;
	}
}
.my-info-panel {
	margin-top: 100rpx;
	display: flex;
	width: calc(100% - 132rpx);
	margin-left: 66rpx;
	justify-content: space-between;
	.-user-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #393939;
	}
	.-to-auth {
		background-color: #ebb287;
		//一点点向右下方的阴影
		box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
		color: #ffffff;
		display: flex;
		border-radius: 30rpx;
		align-items: center;
		padding: 0 30rpx;
	}
}
.my-menu-list {
	display: flex;
	flex-direction: column;
	margin-top: 60rpx;
	.my-menu-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		position: relative;

		.-left {
			display: flex;
			font-size: 32rpx;
			color: #393939;

			margin-left: 45rpx;
			.-text {
				margin-left: 20rpx;
			}
		}
		.-right {
			margin-right: 30rpx;
		}
	}
	.my-menu-item::after {
		content: "";
		display: block;
		width: 100%;
		height: 14rpx;
		background-image: linear-gradient(to bottom, #f4f4f4, #ffffff);
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
</style>
